<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch-举例</title>
</head>
<body>

<div id="app">

    <div>
        question: <input type="text" v-model="question">
    </div>
    <div>
        {{answer}}
    </div>

</div>

</body>
<script src="../../lib/vue.global.js"></script>

<script>
    var app = Vue.createApp({
        data: function () {
            return {
                question: '',
                answer: ''
            }
        }, watch: {
            question: function (val) {
                /**
                 * 版本1
                 * */
                //this.answer = this.getAnswer(val);

                /**
                 *  版本2
                 * */

                var _this = this;

                this.getAnswer2(val,function (answer){
                    _this.answer = answer;
                })


                // getAnswer2(question).then(function (answer){
                //
                // })
            }
        }, methods: {
            getAnswer: function (question) {
                return 'the answer is : the answer for ' + question;
            },
            getAnswer2:function (question,callback){
                setTimeout(function (){
                     var answer = 'the answer is : the answer for ' + question;
                     callback(answer);
                },2000)
            }
        }
    })
    app.mount('#app')
</script>
</html>